<template>
    <div class="nesAddress">
      <div class="header">
        <van-nav-bar title="新增地址" fixed  right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <div class="nesAddress_con">
        <ul>
          <li>
            <p>收货人</p>
            <input type="text" placeholder="请输入收货人" v-model.trim='formData.aname'/>
          </li>
          <li>
            <p>联系电话</p>
            <input type="text" placeholder="请输入联系电话" oninput="if(value.length>11) value=value.slice(0,11)" maxlength="11"
                   v-model.trim='formData.aphone' @blur="checkPhoneNumber()"/>
          </li>
          <li>
            <!--<mt-cell title=" 省 市 区:" :value="areaString" is-link @click.native="handlerArea"></mt-cell>-->
            <!--<mt-popup v-model="areaVisible" class="area-class" position="bottom">-->
              <!--<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>-->
            <!--</mt-popup>-->
            <div class="nesAddress_con_title">省 市 区</div>
            <select v-model="formData.province.model"
                    @change="changeAddress('province')" class="nesAddress_select">
              <option value='0'>请选择</option>
              <option :value='item.id' v-for="item in formData.province.data">{{item.name}}</option>
            </select>
            <select v-model="formData.city.model" @change="changeAddress('city')" class="nesAddress_select">
                <option :value='item.id' v-for="item in formData.city.data">{{item.name}}</option>
            </select>
            <select v-model="formData.county.model" @change="changeAddress('county')" class="nesAddress_select">
              <option :value='item.id' v-for="item in formData.county.data">{{item.name}}</option>
            </select>
          </li>
          <li>
            <p>收货地址</p>
            <input type="text" placeholder="请输入详细收货地址"  v-model.trim='formData.address'/>
          </li>
          <li>
            <p>默认地址</p>
            <div class="mycheck">
              <input type="checkbox" value="" id="checkbox1" name="" v-model="setDefault"/>
              <label for="checkbox1"></label>
            </div>
          </li>
        </ul>
      </div>
      <div class="nesAddress_foot">
          <button class="nesAddress_foot_button1"  :disabled="!formData.address" :class="formData.address ? 'submitBtn' : 'yf_submitBtn'" @click='saveAddress()'>确认</button>
      </div>
    </div>
</template>

<script>
  import cityData from '../../common/cityData.js'
  export default {
    name: "nesAddress",
    data() {
      return {
        setDefault:false,//记录是否设为默认地址
        default_address_flag: 0,    //默认地址标签
        formData: {
          aname: '',
          address: '',
          aphone: '',
          county: {
            data: [],
            model: 0,
            name: ''
          },
          city: {
            data: [],
            model: 0,
            name: ''
          },
          province: {
            data: [],
            model: 0,
            name: ''
          }
        },
        choosedAddressId: null,//当前被选中的地址的ID

      }
    },
    created:function () {
      //隐藏公用底部
      this.$emit('public_footer', false);
      setTitle('新增地址')
    },
    mounted: function () {

      this.getCitysMethod()
    },
    methods:{
      //返回
      onClickLeft() {
        this.$router.go(-1);
      },
      //获得省份列表
      getCitysMethod() {
        /*从数据中循环出省份*/
        let P = []
        cityData.forEach((item, i) => {
          if (item.id % 10000 == 0 && item.id != 100000) {
            P.push({
              id: item.id,
              name: item.name
            })
          }
        })
        this.formData.province.data = P
      },
      //循环出城市列表或地区列表
      changeAddress(type, call) {
        if (type == 'province') {
          let C = []
          this.formData.city.model = 0
          this.formData.county.model = 0

          /*从数据中循环出当前选择省份下面的市区*/
          cityData.forEach((item, i) => {
            if (item.parentId == this.formData.province.model) {
              C.push({
                id: item.id,
                name: item.name
              })
            }
            if (item.id == this.formData.province.model) {
              this.formData.province.name = item.name
            }
          })
          this.formData.city.data = C
          call && call()
        } else if (type == 'city') {
          let Cu = []
          this.formData.county.model = 0

          /*从数据中循环出当前选择市下面的区县*/
          cityData.forEach((item, i) => {
            if (item.parentId == this.formData.city.model) {
              Cu.push({
                id: item.id,
                name: item.name
              })
            }
            if (item.id == this.formData.city.model) {
              this.formData.city.name = item.name
            }
          })
          this.formData.county.data = Cu
          call && call()
        } else {
          cityData.forEach((item, i) => {
            if (item.id == this.formData.county.model) {
              this.formData.county.name = item.name
            }
          })
        }
      },


    //  将地址传给后台
      async saveAddress(){
        let this_ = this;
        let isdefaultads = this.setDefault==true ? 1:0
        var userList=[]
        var userList=JSON.parse(localStorage.getItem('userInfo'))
        this.userList=userList
        let params = {
          user_id:userList.userId,
          name:this_.formData.aname,
          phone:this_.formData.aphone,
          detailed:this_.formData.address,
          province:this_.formData.province.name,
          city:this_.formData.city.name,
          county:this_.formData.county.name,
          is_default:isdefaultads,
        };
        const res = await this.$axios.post(this.$api.AddUserAddress, params);
        if (res.success) {
          this.$toast(res.msg);
          this.$router.push({path:'/Address'})
        } else {
          this.$toast(res.msg);
        }
      },
      //表单初始化
      checkPhoneNumber: function () {
        let reg = /^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/;
        if (reg.test(this.formData.aphone) == false) {
          this.formData.aphone = '';
          this.$message({
            type : 'error',
            message : '请输入正确的手机号'
          });
        }
      },
    },

  }
</script>

<style scoped>
  @import '../../assets/css/index.css';
  .area-class {width: 100%;height: 28%;}
  .mycheck {width: 0.4rem;position: relative;right: 0.2rem;float: right;top:0.15rem;display: inline-block;}
  .mycheck input[type=checkbox] {visibility: hidden;}
  .mycheck label {cursor: pointer;position: absolute;width: 0.2rem;height: 0.2rem;top: 0;left: 0;border: 1px solid grey;border-radius: 1.8rem;
    -moz-border-radius: 1.8rem;      /* Gecko browsers */-webkit-border-radius: 1.8rem;   /* Webkit browsers */ /* W3C syntax */}
  .mycheck label:after {opacity: 0;content: '';position: absolute;width: 0.09rem;height: 0.05rem;background: transparent;top: 0.04rem;left: 0.04rem;border: 2px solid #fff;border-top: none;border-right: none;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
  .mycheck input[type=checkbox]:checked + label {background: #01bf47;border: 0;}
  .mycheck input[type=checkbox]:checked + label:after {opacity: 1;}
</style>
